<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端路由机制</title>
  </head>
  <body>
    <nav class="nav-box">
      <a href="/"> 首页 </a>
      <a href="/product">产品中心</a>
      <a href="/personal">个人中心</a>
    </nav>

    <div class="view-box"></div>
    <!-- onpopstate 方法会监听浏览器的地址变化 -->

    <!-- IMPORT JS -->
    <script>
      /*
            History路由{浏览器路由}
                + 利用了H5中的HistoryAPI来实现页面地址的切换【可以不刷新页面】,history切换不会刷新页面
                + 但是如果不是改变的哈希值改变的是地址，a标签会进行跳转,需要阻止他的默认行为
                + 根据不同的地址，到路由中进行匹配，让容器中渲染不同的内容【组件】

                + 提供了history对象，这个对象中的提供了页面地址切换的方法
                back 返回一级路由 back()
                forward  前进一级路由  forward()
                go 指定前进和后退路由的级数 go(num)
                pushState 跳转路由到指定路由
                replaceState 替换当前路由，将当前的路由信息替换成现在的
            使用location.pathname 就可以获取到当前的地址信息

            + 问题：我们切换的地址，在页面不刷新的情况下是没有问题的，但是如果页面刷新，这个地址是不存在的，会报404错误！！此时我们需要服务器的配合：
                在地址不存在的情况下，也可以把主页面内容返回 
      */

      // 获取渲染内容的容器
      const viewBox = document.querySelector(".view-box");
      const navBox = document.querySelector(".nav-box");
      navBox.onclick = function (e) {
        let target = e.target;
        if (target.tagName === "A") {
          e.preventDefault(); // 阻止a标签页面跳转/刷新等默认行为
          history.pushState({}, "", target.href);
          //   去路由匹配
          routerMatch();
        }
      };
      const routes = [
        {
          path: "/",
          component: "首页的内容",
        },
        {
          path: "/product",
          component: "产品中心的内容",
        },
        {
          path: "/personal",
          component: "个人中心的内容",
        },
      ];

      // 路由匹配的方法
      const routerMatch = function routerMatch() {
        let path = location.pathname;
        let text = "";
        routes.forEach((item) => {
          if (item.path === path) {
            text = item.component;
          }
        });
        viewBox.innerHTML = text;
      };

      //   默认展示首页
      history.pushState({}, "", "/");
      routerMatch();

      // 监听popstate地址变化，此事件：执行go/forward/back （或则点击前进后退按钮 ）等方法可以触发，但是执行pushState/
      // replaceState等方法无法触发

      window.onpopstate = routerMatch;
    </script>
  </body>
</html>
